<template>
    <!-- 订单列表组件 -->
    <ul>
        <li class="formHead">
            <span class='bettingTime'>投注时间</span>
            <span class="wayOfPlay">玩法</span>
            <span class="number">期号</span>
            <span class="purchaseContent">购买内容</span>
            <span class="returnPoint">返点</span>
            <span class="purchaseAmount">购买金额</span>
            <span class="status">最高奖金</span>
        </li>
        <li v-for="(item,index) in ddd" :key="index" >
            <span class="bettingTime">{{ item.bettingTime }}</span>
            <span class="wayOfPlay">{{ item.wayOfPlay }}</span>
            <span class="number">{{ item.number }}</span>
            <span class="purchaseContent">
                <span class="hovertip">{{ item.purchaseContent | filterContent }}</span>
                <div class="tip">
                    <div class="rect">
                        <p class="orderNum">订单编号: {{ item.orderNumber }}</p>
                    </div>
                    <div class="tria"></div>
                </div>
                <a href="">详情</a>
                <!-- 详情hover -->
                <div class="detail">
                    <div class="detailText">
                        <p class="line1">
                            <span class="wei">万位: </span>
                            <span class="number1">123456789</span>
                            <span class="wei">千位: </span>
                            <span class="number1">123456789</span>
                            <span class="wei">百位: </span>
                            <span class="number1 baiwei">123456789</span>
                        </p>
                        <p class="line2">
                            <span class="wei">十位: </span>
                            <span class="number1">123456789</span>
                            <span class="wei">个位: </span>
                            <span class="number1">123456789</span>
                        </p>
                    </div>
                    
                    <div class="tria2"></div>
                </div>
                
            </span>
            <span class="returnPoint">{{ item.returnPoint }}</span>
            <span class="purchaseAmount">{{ item.purchaseAmount | filterNumber }}</span>
            <span class="status">{{ item.status | filterNumber }}</span>
            <button class="cancel" @click="chedan(index)">撤单</button>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'orderList',
    props: {
        ddd:{
            type: Array,
            default(){
                return[
                    {
                        orderNumber: 12345687891231231, //订单编号
                        prizeNumber: '12 21 45 02',         //开奖号码
                        bettingTime: '01/30 09:21:15',      //投注时间
                        wayOfPlay: '重庆时时彩-五星直选复式',       //玩法
                        number: '1111111',                  //期号
                        purchaseContent: '4,8,4,5,2,0,0',   //购买内容
                        returnPoint: '0.20%',           //返点
                        purchaseAmount: 2500,           //购买金额
                        status: 5000.00                 //最高奖金
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        prizeNumber: '12 21 45 02',
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '1111111',
                        purchaseContent: '4,8,4,5,2,0,0',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 3000.00
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '170306095',
                        purchaseContent: '4,8,4,5,2,0,0,0,0,0,',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 0.10
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '170306095',
                        purchaseContent: '4,8,4,5,2,0,0',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 1100.00
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '170306095',
                        purchaseContent: '4,8,4,5,2,0,0',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 7000.00
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '170306095',
                        purchaseContent: '4,8,4,5,2,0,0',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 7000.00
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '170306095',
                        purchaseContent: '4,8,4,5,2,0,0',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 7000.00
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '170306095',
                        purchaseContent: '4,8,4,5,2,0,0',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 7000.00
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '170306095',
                        purchaseContent: '4,8,4,5,2,0,0',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 7000.00
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '170306095',
                        purchaseContent: '4,8,4,5,2,0,0',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 7000.00
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '170306095',
                        purchaseContent: '4,8,4,5,2,0,0',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 7000.00
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '170306095',
                        purchaseContent: '4,8,4,5,2,0,0',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 7000.00
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '170306095',
                        purchaseContent: '4,8,4,5,2,0,0',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 7000.00
                    },
                    {
                        prizeNumber: '12 21 45 02',
                        orderNumber: 1234568789,
                        bettingTime: '01/30 09:21:15',
                        wayOfPlay: '重庆时时彩-五星直选复式',
                        number: '170306095',
                        purchaseContent: '4,8,4,5,2,0,0',
                        returnPoint: '0.20%',
                        purchaseAmount: 2500,
                        status: 7000.00
                    },
                ]
            }
        }
    },
    filters:{
        //保留小数点后两位
        filterNumber(value){
            let realVal = parseFloat(value).toFixed(2)
            return realVal
        },
        //超出字符显示省略号
        filterContent(value){
            if( !value ){
                return '';
            }else if( value.length > 15 ){
                return value.slice(0,15) + '...';
            }
            return value;
        },
        
    },
    methods:{
        //撤单事件
        chedan(index){
            this.ddd.splice('index',1)
            // this.$emit('chedan',index)
        }
    }
}
</script>

<style lang="stylus" scoped>
    ul
        list-style none;
        width 860px;
        
        li
            position relative;
            width 860px;
            height 36px;
            line-height 36px;
            background-color #faf8f8;
            border-bottom 1px solid #dbd3d3;
            color #3a384d;
            font-size 0;
            border-left 1px solid #dbd3d3;
            border-right 1px solid #dbd3d3;

            button 
                display none;
                position absolute;
                right 0;
                top 0;
                width 60px;
                height 36px;
                // margin-right -
                background-color #c82424;
                color #fff;
                border none;
                cursor pointer;
            button:focus
                border none;
                outline none;
       


            span
                display inline-block;
                font-size 14px;   
            .bettingTime
                width 130px;
                text-indent: 13px;
            .wayOfPlay 
                width 196px;
            .number
                width 100px;
            .purchaseContent 
                position relative
                width 180px;
                a
                    // position absolute;
                    // right 10px;
                    margin-left 8px;
                    display none;
                    color red;
                    text-decoration none;
                    cursor pointer;
                    // bottom 1px;
                
                .detail
                    display none;
                    position relative;
                    top -101px;
                    left -80px;
                    // transform translate(-50%,-100%);
                    height 66px;
                    width 408px;
                    background-color #323232;
                    opacity 0.8;
                    z-index 1000
                    .detailText
                        position absolute;
                        width 358px;
                        margin-left 26px;
                        color #fff;
                        font-size 0px;
                        .line1
                            margin-top 3px;
                            margin-bottom 10px;
                        p
                            width 358px;
                            height 14px;
                            font-size 14px;
                            
                            span 
                                // float left;
                                display inline-block;
                                height 14px;
                                line-height 14px;
                            .wei
                                width 36px;
                            
                            .number1
                                width 79px;
                            .baiwei
                                width 71px;
                    .tria2
                        position absolute;
                        left 197px;
                        bottom -4px;
                        width 10px;
                        height 10px;
                        background-color #323232;
                        transform rotate(45deg);
                a:hover + .detail
                    display block;
                

                .tip
                    display none;
                    position absolute;
                    top 0;
                    left 0;
                    transform translate(-50%,-100%);
                    width 240px;
                    height 36px;
                    // background-color #000;
                    border-radius 5px;
                    // line-height 36px;
                    color #fff;
                    font-size 0;

                    .rect
                        position absolute
                        top 0;
                        left 0;
                        width 240px;
                        height 36px;
                        background-color rgba(0,0,0,.8);
                        border-radius 5px;
                        // line-height 36px;
                        text-align center;
                        font-size 14px;
                        

                        p
                            // position absolute;
                            top 0;
                            width 222px;
                            height 36px;
                            // bottom  0;
                            margin-left 18px;
                            line-height 36px;
                            text-align left;
                            left 18px;
                        .orderNum
                            // margin-top 16px;
                    .tria
                        position absolute;
                        left 115px;
                        bottom -4px;
                        width 10px;
                        height 10px;
                        background-color #323232;
                        transform rotate(45deg);
            .purchaseContent > .hovertip:hover + .tip
                display block;
            .purchaseContent:hover a
                display inline-block;
            .returnPoint
                width 70px;
            .purchaseAmount
                width 90px;
                color green;
            .status
                width 92px;
                color red;
            .red
                color red;
        .formHead
            width 862px;
            background-color #e8e0dd
            border-top 1px solid #dbd3d3
            border-top-left-radius 5px
            border-top-right-radius 5px
            color #5a4844
            // font-size 0;
            font-weight bold
            margin 0;
            box-sizing border-box;
            .purchaseAmount
                color #5a4844
            .status
                color #5a4844;
            .cancel
                color #fff
         li:hover button 
            display block;
            color #fff
            font-size 14px
</style>